<template>
  <div class="m-group">
    <el-input
      v-model="searchVal"
      size="mini"
      placeholder="搜索组织"
      type="text"
      style="width: 100%"
      clearable
    >
      <template slot="suffix">
        <i class="el-icon-search"></i>
      </template>
    </el-input>
    <ul class="left-content">
      <li
        v-for="v in list"
        :key="v.id"
        :class="currentGroup.id===v.id?'active':''"
        @click="handleClick(v)"
      >{{ v.userGroup }}</li>

    </ul>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'group',
    data () {
      return {
        list: [],
        searchVal: '',
      }
    },
    props: {
      groupList: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      userGroupList: {
        handler: function (v) {
          if (v) {
            this.list = v
          }
        },
        immediate: true,
        deep: true
      }
    },
    computed: {
      ...mapGetters('user', [
        'userGroupList', 'currentGroup'
      ])
    },
    methods: {
      handleClick (item) {
        this.$store.commit('user/setCurrentGroup', item)
      }
    },
    created () {
      this.$store.dispatch('user/getUserGroupList')
    },
  }
</script>
<style scoped lang='scss'>
.m-group {
  padding-right: 20px;
  /deep/.el-input__suffix {
    display: flex;
    align-items: center;
    margin-right: 5px;
  }
  .left-content {
    margin-top: 10px;
    max-height: calc(100vh - 290px);
    overflow-y: auto;
    li {
      text-align: left;
      padding-left: 24px;
      height: 30px;
      line-height: 30px;
      border-bottom: 2px solid #e6eaed;
      &:hover {
        background-color: #ebeaf2;
        color: #8381b0;
        border-bottom: 2px solid #d9dee5;
      }
    }
    .active {
      background-color: #ebeaf2;
      color: #8381b0;
      border-bottom: 2px solid #d9dee5;
    }
  }
}
</style>
